import React, { Component } from 'react';
import qs from 'qs';
import autoBind from 'react-autobind';
import { Link, browserHistory } from 'dva/router';
import { NavBar, Icon, Button, Checkbox, Modal } from 'antd-mobile';

import { getUserId, getSearch } from '../../../utils/utils'

import dataCenter from '../../../utils/dataCenter'
// style
import styles from './index.css';
import IconfontStyle from '../../../assets/iconfont/iconfont.css';

class AddressBody extends Component {
	constructor(props) {
        super(props)
        autoBind(this)

        this.state = {
        	addressCheckeds: this.getAddressCheckeds(props)
        }
    }
    componentWillReceiveProps(nextProps) {
        if(nextProps.address.addressList != this.props.address.addressList) {
        	this.setState({
        		addressCheckeds: this.getAddressCheckeds(nextProps)
        	})
        }
    }
    componentDidMount() {
    	const { dispatch, meyley } = this.props
    	dispatch({
    		type: 'address/fetchAddress',
    		payload: getUserId()
    	})
    }
    getAddressCheckeds(props) {
    	let obj = {}
    	props.address && props.address.addressList.map(address => {
    		obj[address.addressId] = address.isDefault == '1' ? true : false
    	})
    	return obj
    }
    onToggleCheckbox(address, e) {
    	const { dispatch } = this.props

    	this.setState({
    		addressCheckeds: {
    			...this.state.addressCheckeds,
    			[address.addressId]: e.target.checked
    		}
    	})
    	dispatch({
            'type': 'address/modifyAddress',
            'payload': {
            	...address,
            	isDefault: e.target.checked ? 1 : 0,
            	noWarning: true
            }
        })  
        e.stopPropagation()
        return false
    }
    onEditAddress(address, e) {
    	browserHistory.push(`/addAddr?${qs.stringify(address, {arrayFormat: 'brackets'})}`)

        e.stopPropagation()
        return false
    }
    onRemoveAddress(address, e) {
    	const { dispatch } = this.props

        Modal.alert('确定要删除此收货地址吗?', '', [
          { text: '取消', onPress: () => {
            console.log('delete cancel.')
          }},
          { text: '确定', onPress: () => {
            dispatch({
                'type': 'address/deleteAddress',
                'payload': {
                    addressId: +address.addressId
                }
            })  
          } },
        ])

        e.stopPropagation()
        return false
    }
    onSelectAddress(address) {
        const { location } = this.props
        const search = getSearch(location)

        if(search.fromPage == 'order') {
            dataCenter.address.selected = address

            browserHistory.push('/order')
        } else {
            return false
        }
        
    }
	render() {
		const { address } = this.props
	 	return (
	 		<div className={styles["address-body"]}>
	 			{
	 				address.addressList.length > 0 ? (
		 				<div>{
		 					address.addressList.map((address, kk) => {
		 						return (<div key={kk} className={styles['address-body-item']} >
                                    <div onClick={this.onSelectAddress.bind(this, address)}>
    					 				<div className={styles['address-body-top']}>
    					 					<span>{address.consignee}</span>
    					 					<span className={styles['address-body-phone']}>{address.mobile}</span>
    					 				</div>
    					 				<div className={styles['address-body-des']}>
    					 					<span>{`${address.provinceName}${address.cityName}${address.districtName}${address.address}`}</span>
                                        </div>
					 				</div>
					 				<div className={styles['address-body-des-controll']}>
					 					<Checkbox onChange={this.onToggleCheckbox.bind(this, address)} checked={this.state.addressCheckeds[address.addressId]}><span style={{fontSize: '0.26rem', marginLeft: 12, verticalAlign: 'middle'}}>默认地址</span></Checkbox>

					 					<div className={styles['address-body-des-controll-edit']} onClick={this.onRemoveAddress.bind(this, address)}>
					 						<img src={require('../../../assets/icon/delete.png')} style={{position: 'relative', top: '0.04rem', width: '0.30rem', height: '0.33rem'}}/>
					 						<span style={{fontSize: '0.26rem', marginLeft: 4}}>删除</span>
					 					</div>

					 					<div className={styles['address-body-des-controll-edit']} onClick={this.onEditAddress.bind(this, address)}>
					 						<img src={require('../../../assets/icon/edit.png')} style={{position: 'relative', top: '0.04rem', width: '0.30rem', height: '0.33rem'}}/>
					 						<span style={{fontSize: '0.26rem', marginLeft: 4}}>编辑</span>
					 					</div>
					 				</div>
					 			</div>)
		 					})	
		 				}
	 					</div>) : (
	 					<div className={styles['address-body-item']}>
			 				<div className={styles['address-body-top']}>
			 					<span>暂无地址</span>
			 				</div>
			 				<div className={styles['address-body-des']}>
			 					<span>请点击下方添加地址</span>
			 				</div>
			 			</div>)
	 			}
	 			

	 			<div className={styles['address-body-controller']}>
	 				<Button className={styles["address-body-button"]} onClick={() => browserHistory.push('/addAddr')}>
	 					<span style={{color: '#fff'}}>
                        + 
	 					新建地址
                        </span>
	 				</Button>
	 			</div>
	 		</div>
	  	);
	}
};

AddressBody.propTypes = {
};

export default AddressBody
